<template>
  <div class="user-dashboard" :class="{ 'dashboard-expanded': isExpanded }">
    <div class="dashboard-items">
      <div class="dashboard-item">
        <el-tooltip content="Ctrl+ D 快速收藏不迷路！" placement="left">
          <div class="item-content">
            <i class="el-icon-star-off"></i>
            <span>收藏网址</span>
          </div>
        </el-tooltip>
      </div>
      
      <div class="dashboard-item" @click="handleShare">
        <el-tooltip content="分享获得奖励" placement="left">
          <div class="item-content">
            <i class="el-icon-share"></i>
            <span>分享有礼</span>
            <div class="discount-tag">奖励20%</div>
          </div>
        </el-tooltip>
      </div>
      
      <div class="dashboard-item">
        <el-popover
          placement="left"
          width="200"
          trigger="hover"
          popper-class="custom-popover">
          <template #default>
            <div class="qr-content">
              <img src="@/assets/info/service-qr.png" alt="客服二维码" class="qr-image">
              <div class="qr-text">
                <p>扫码添加客服微信</p>
                <p class="sub-text">工作时间：9:00-18:00</p>
              </div>
            </div>
          </template>
          <template #reference>
            <div class="item-content">
              <i class="el-icon-service"></i>
              <span>联系客服</span>
            </div>
          </template>
        </el-popover>
      </div>
      
      <div class="dashboard-item">
        <el-popover
          placement="left"
          width="200"
          trigger="hover"
          popper-class="custom-popover">
          <template #default>
            <div class="qr-content">
              <img src="@/assets/info/grounp-qr.png" alt="官方群二维码" class="qr-image">
              <div class="qr-text">
                <p>扫码加入官方群</p>
                <p class="sub-text">获取最新活动资讯</p>
              </div>
            </div>
          </template>
          <template #reference>
            <div class="item-content">
              <i class="el-icon-chat-dot-square"></i>
              <span>官方群</span>
            </div>
          </template>
        </el-popover>
      </div>

      <div class="dashboard-item" @click="backToTop">
        <el-tooltip content="返回顶部" placement="left">
          <div class="item-content">
            <i class="el-icon-top"></i>
            <span>回到顶部</span>
          </div>
        </el-tooltip>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'UserDashboard',
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggleDashboard() {
      this.isExpanded = !this.isExpanded
    },
    handleShare() {
      // 检查当前路由，如果不在 promotion 页面才进行跳转
      if (this.$route.path !== '/promotion') {
        this.$router.push('/promotion')
      }
    },
    backToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style scoped>
.user-dashboard {
  position: fixed;
  right: 40px;
  bottom: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(63, 93, 98, 0.15);
  z-index: 1000;
  transition: all 0.3s ease;
  width: 60px;
  overflow: hidden;
}

.dashboard-items {
  padding: 8px 0;
}

.dashboard-item {
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  text-align: center;
  padding: 12px 0;
}

.item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dashboard-item:hover {
  background: rgba(63, 93, 98, 0.1);
}

.dashboard-item i {
  font-size: 24px;
  color: #3F5D62;
}

.dashboard-item span {
  color: #3F5D62;
  font-size: 12px;
  margin-top: 2px;
}

.discount-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  padding: 2px 4px;
  border-radius: 8px;
  font-size: 10px;
  transform: scale(0.8);
  transform-origin: top right;
}

.dashboard-toggle {
  text-align: center;
  padding: 8px;
  cursor: pointer;
  border-top: 1px solid #ebeef5;
}

.dashboard-toggle i {
  color: #909399;
}

.dashboard-expanded {
  transform: translateY(0);
}

.dashboard-expanded .dashboard-items {
  display: block;
}

/* 分隔线 */
.dashboard-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: rgba(63, 93, 98, 0.15);
}

/* 添加阴影效果，使用主题色 */
.user-dashboard {
  position: fixed;
  right: 40px;
  bottom: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(63, 93, 98, 0.15);
  z-index: 1000;
  transition: all 0.3s ease;
  width: 60px;
  overflow: hidden;
}

/* 添加图标悬浮效果 */
.dashboard-item:hover i {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* 添加新的样式 */
.qr-content {
  text-align: center;
  padding: 10px;
}

.qr-image {
  width: 150px;
  height: 150px;
  margin-bottom: 10px;
}

.qr-text {
  color: #3F5D62;
}

.qr-text p {
  margin: 5px 0;
}

.qr-text .sub-text {
  font-size: 12px;
  color: #909399;
}

.custom-popover {
  padding: 15px;
  border-radius: 8px;
}

/* 确保弹出层在其他元素之上 */
.el-popover {
  z-index: 2000;
}
</style> 